<!-- 首页-精品店铺 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<view if="isConnected && isRefresh" class="content-box" style="padding-top: 20rpx;">
			<block v-for="item in storeList" >
			<view class="activity-wrap u-p-b-10  u-m-b-10 groupon-card" style="
			width: 710rpx;margin-left: 20rpx;border-radius: 20rpx;" >
				<view style="-webkit-justify-content: space-between;justify-content: space-between;flex-direction: row; display: flex;height: 100rpx;">
					<view>
						<view style="flex-direction: row; display: flex;">
							<view class="text u-flex" style="width: 100rpx;height: 100rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
								<image :src="item.store.logo" mode="aspectFit" style="width: 80rpx;height: 80rpx;margin-top: 10rpx;border-radius: 15rpx;"></image>
							</view>
							<view style="  display: flex;flex-direction: column;-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between; ;">
								<view  style="height: 50rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;font-size: 30rpx;color: #000;">
									{{item.store.name }}
								</view>
								<view>
									<view 
									style="height: 50rpx;
									text-align: left;
									padding-left: 20rpx;
									padding-top: 10rpx;
									font-size: 20rpx;
									color: #999999;">{{item.store.favorites}}人关注 | 已售{{item.store.sales}}件</view>
								</view>
							</view>
						</view>
					</view>
					<view  style="height: 100rpx;margin-top:20rpx;margin-right: 10rpx" @tap="tostore(item.store.id)">
						<text style="height:56rpx;line-height:56rpx;;border:#fd9306 2rpx solid;border-radius: 25rpx;font-size: 28rpx;padding: 8rpx;color: #fd9306;">进店逛逛</text>
					</view>
				</view>
				<!-- 活动商品 -->
					<view class="goods-box u-flex">
<!--						<view class="min-goods u-m-r-14"-->
<!--                  v-for="mgoods in item.productList"-->
<!--                  :key="mgoods.id"-->
<!--                  @tap="jump('/pages/goods/detail', { id: mgoods.id })">-->
<!--							<view class="img-box">-->
<!--								<view class="pirce-card">-->
<!--									<view class="pirce-info">-->
<!--										￥{{mgoods.price}}-->
<!--									</view>-->
<!--									<view class="pirce-to">-->
<!--										立即抢购-->
<!--									</view>-->
<!--								</view>-->
<!--								<image class="img" :src="mgoods.medium" mode=""></image>-->
<!--							</view>-->
<!--						</view>-->
            <view class="goods-box">
              <view class="big-img" @tap="jump('/pages/goods/detail', { id: item.productList[0].id })">
                <view class="absolute-box">￥{{item.productList[0].price}}</view>
                <image :src="item.productList[0].productImages[0].medium" class="u-radius-20 ljshop-image"></image>
              </view>
              <view class="info-img">
                <view class="info-img-s" @tap="jump('/pages/goods/detail', { id: item.productList[1].id })">
                  <view class="absolute-box">￥{{item.productList[1].price}}</view>
                  <image :src="item.productList[1].productImages[0].medium" class="u-radius-20 ljshop-image"></image>
                </view>
                <view class="info-img-s" @tap="jump('/pages/goods/detail', { id: item.productList[2].id })">
                  <view class="absolute-box">￥{{item.productList[2].price}}</view>
                  <image :src="item.productList[2].productImages[0].medium" class="u-radius-20 ljshop-image"></image>
                </view>
              </view>
            </view>
					</view>
			</view>
		    </block>
		</view>
	 <view class="upward" v-if="isShow"	@click="pullTop()"> <u-icon name="arrow-upward"	color="#999" size="28"> </u-icon></view>
	</view>
</template>

<script>

 
	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	// #endif
	export default {
		components: {
			 
		},
		data() {
			return {
				isShow: false,
				storeList: [],
				page:1
			};
		},
		computed: {
		 
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
			if (e.scrollTop > 500) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		onShow() {
		 this.init();
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-PLUS
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		},
		onReachBottom() {
				this.page += 1
				this.init()
		},
		methods: {
      onLook(e){
        console.log(e)
      },
		 pullTop() {
		 	uni.pageScrollTo({
		 		scrollTop: 0, //滚动到距离顶部为0
		 		duration: 500 //滚动时长
		 	})
		 },
			init() {
			 let that = this;
				uni.showLoading({
					
				})
			 
			 that.$http('common.storedetail', {
			 	themeFloorId: this.$Route.query.themeFloorId,
				current:that.page,
				pageSize: 10
			 }).then(res => {
			 	//console.info(JSON.stringify(res))
			 	if (res.code == 1) {
					if(res.data.sotre.length > 0){
						uni.hideLoading()
						res.data.sotre.forEach(item =>{
							if(item.productList.length == 4) item.productList.splice(item.productList.length-1,1)
						})
						for(var i in res.data.sotre){
							for(var y in res.data.sotre[i].productList) {
								res.data.sotre[i].productList[y].productImages = JSON.parse(res.data.sotre[i].productList[y].productImages)
							}
						}
						that.storeList  = that.storeList.concat(res.data.sotre)
					}else{
						this.page -= 1
					}
			 	}
			 });
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			tostore(stroeId){
				uni.setStorageSync("detailStoreId", stroeId)
				this.$Router.push({
					path: '/pages/store/index',
					query: {
						id: stroeId
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
.groupon-card {
	
}

.groupon-title {

	background-position: center top;
	background-size: 100% auto;
}
.activity-wrap {
	background-color: #fff;
	
	.title-box {
		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		.more-box {
			.more-text {
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
			.more-icon {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.scroll-box,
	.goods-box {
		justify-content: space-between;
		width: 100%;
	}
}
.absolute-box{
  position: absolute;
  bottom: 20rpx;
  left: 10rpx;
  min-width: 102rpx;
  height: 45rpx;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  border-radius: 10rpx;
  color: #fff;
  text-align: center;
  line-height: 45rpx;
  font-size: 20rpx;
}
.goods-box{
  display: flex;
  padding: 5rpx;
  .big-img{
    width: 460rpx;
    height: 449rpx;
    border-radius: 20rpx;
    position: relative;
  }
  .info-img{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .info-img-s{
      width: 217rpx;
      height: 214rpx;
      //background: black;
      border-radius: 20rpx;
      position: relative;

    }
  }
}
// 小商品卡片
.min-goods {
	flex: 1;
	width: 220rpx;
	height: 220rpx;

	border-radius: 10rpx;
	.img-box {
		width: 220rpx;
		height: 220rpx;
		overflow: hidden;
		position: relative;
		border-radius: 10rpx 10rpx 0 0;
		border-radius: 15rpx;
		.pirce-card{
			position: absolute;
			width: 100%;
			height: 40rpx;
			background-color: #fd9306;
			bottom: 0;
			left: 0;
			z-index: 99;
			display: flex;
			justify-content: space-between;
			font-size: 22rpx;
			align-items: center;
			color: #fff;
			padding-right: 10rpx;
			.pirce-info{
				width: 100rpx;
				height: 60rpx;
				// background: red;
				background-color: #fd9306;
				border-radius: 10rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				padding-left: 15rpx;
			}
		}
		image {
			width: 220rpx;
			height: 220rpx;
			background-color: #ccc;
		}
	}
	.mgoods-card-bottom {
		height: 160rpx;
		background: url($IMG_URL+'/imgs/tag/groupon_goods_bg.png') no-repeat;
		background-position: bottom center;
		background-size: 100% 100%;
	}
	.goods-title {
		font-size: 26rpx;
		font-weight: 500;
		color: #000000;
		width: 180rpx;
		line-height: 26rpx;
	}

	.price {
		font-size: 30rpx;
		font-weight: 500;
		color: #ff0000;
		&::before {
			content: '￥';
			font-size: 24rpx;
		}
	}
	.original-price {
		font-size: 20rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
	.groupon-num-box {
		.avatar-box {
			direction: rtl;
			unicode-bidi: bidi-override;
			height: 30rpx;
			.avatar-img {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
		}
		.groupon-num-text {
			font-size: 18rpx;
			font-weight: 500;
			color: #e9b461;
		}
	}
}

// 大商品卡片
.big-goods {
	width: 710rpx;
 
	background: #ffffff;
	box-shadow: 0px 7rpx 8rpx 1rpx #fffaef;
	border-radius: 20rpx;
	.goods-img {
		width: 220rpx;
		height: 220rpx;
		border-radius: 6rpx;
	}
	.card-right {
		width: 430rpx;
		height: 100%;
	}
	.goods-title {
		font-size: 26rpx;
		font-weight: 600;
		width: 400rpx;
		color: #000000;
		vertical-align: middle;
		.title-tag {
			transform: scale(0.9);
		}
	}
	.subtitle-text {
		font-size: 22rpx;
		width: 400rpx;
		font-weight: 500;
		color: #666666;
	}
	.buy-btn {
		width: 120rpx;
		line-height: 50rpx;
	
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
	}
	// 拼团
	.sell-box {
		background: rgba(#f9efd6, 0.3);
		border-radius: 16rpx;
		line-height: 32rpx;
		.sell-num {
			font-size: 20rpx;

			font-weight: 400;
			color: #ff6904;
		}

		.hot-icon {
			font-size: 26rpx;
			color: #ff6904;
			margin-right: 8rpx;
		}
	}
	.group-num {
		font-size: 20rpx;

		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-left: 20rpx;
	}
	// 价格
	.price {
		color: #ff0000;
		font-weight: 600;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
	.origin-price {
		color: #c4c4c4;
		font-size: 24rpx;
		text-decoration: line-through;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
}
</style>
